<template>
	<el-row
		type="flex"
		class="pa-1"
		style="background: #fff; box-sizing: border-box; padding-top: 0"
	>
		<div class="title">{{ title }}</div>
		<cl-flex1 />
		<div>
			<cl-filter label="关键字">
				<el-input
					v-model="searchForm.keyword"
					:placeholder="`请输入${inputPlaceholder}`"
					clearable
					style="width: 200px"
				/>
			</cl-filter>
			<cl-filter label="品牌" v-if="hasBrand">
				<cl-select v-model="searchForm.bra_id">
					<el-option label="全部" value="" />
					<el-option
						v-for="item in brandList"
						:key="item.bra_id"
						:label="item.bra_name"
						:value="item.bra_id"
					/>
				</cl-select>
			</cl-filter>

			<el-button
				type="primary"
				style="margin-left: 30px"
				icon="el-icon-search"
				@click="handle(1)"
			>
				搜索
			</el-button>
			<el-button @click="handle(0)">重置</el-button>
			<el-button type="primary" style="margin-left: 30px" icon="el-icon-plus" @click="add">
				{{ addTitle }}
			</el-button>
		</div>
	</el-row>
</template>
<script>
export default {
	props: {
		title: {
			type: String,
			default: ""
		},
		addTitle: {
			type: String,
			default: ""
		},
		inputPlaceholder: {
			type: String,
			default: ""
		},
		hasBrand: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			brandList: [],
			searchForm: {
				keyword: "",
				bra_id: ""
			}
		};
	},
	created() {},
	methods: {
		// 品牌
		async getBrand(biz_id) {
			const data = await this.$service.brand.usermanage({
				biz_id
			});
			this.brandList = data;
		},
		handle(type) {
			if (!type) {
				this.searchForm.keyword = "";
				this.searchForm.bra_id = "";
			}
			this.$emit("handle", this.searchForm.keyword, this.searchForm.bra_id);
		},
		add() {
			this.$emit("add");
		}
	}
};
</script>
<style lang="scss" scoped>
.title {
	font-size: 18px;
}
</style>
